<template>
    <div class="qilin-leftMenu qilin-mt-12" :style="getWidth">
        <el-row>
            <el-col>
                <el-menu class="el-menu-vertical-demo"
                    :default-active="defaultRouteName"
                    :collapse="getCollapse"
                >
                    <template v-for="item in menuList">
                        <router-link :to="item.path" v-if="!item.children || item.children.length === 0" :key="item.name">
                            <el-menu-item :index="item.path">
                                <i :class="item.icon"></i>
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>
                        </router-link>
                        <el-submenu v-else :key="item.name" :index="item.path">
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <template v-for="(citem) in item.children">
                                <router-link :to="citem.path" v-if="!citem.children || citem.children.length === 0" 
                                    :key="citem.name"
                                >
                                    <el-menu-item :index="citem.path">
                                        <span slot="title">{{citem.name}}</span>
                                    </el-menu-item>
                                </router-link>
                                <el-menu-item-group v-else :key="citem.name">
                                    <template slot="title">
                                        <span>{{citem.name}}</span>
                                    </template>
                                    <template v-for="(ccitem) in citem.children">
                                        <router-link :to="ccitem.path" :key="ccitem.name">
                                            <el-menu-item :index="ccitem.path">
                                                <span slot="title">{{ccitem.name}}</span>
                                            </el-menu-item>
                                        </router-link>
                                    </template>
                                </el-menu-item-group>
                            </template>
                        </el-submenu>
                    </template>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return {
            menuList:[ //左侧菜单数据集--暂时只考虑到三层嵌套
                {
                    name:"首页",
                    icon:"el-icon-s-home",
                    path:"/index"
                },
                {
                    name:"未来市场",
                    icon:"iconfont icon-meiyuan9",
                    path:"/fund",
                    children:[
                        {
                            name:"螃蟹市场",
                            path:"/fund/crab",
                            children:[]
                        },
                        {
                            name:"资金流水",
                            path:"/fund/fundList",
                            children:[]
                        }
                    ]
                },
                {
                    name:"信息管理",
                    icon:"el-icon-s-comment",
                    path:"/info",
                    children:[
                        {
                            name:"个人信息",
                            path:"/info/message",
                            children:[]
                        },
                        {
                            name:"用户管理",
                            path:"/info/user"
                        },
                        {
                            name:"图片管理",
                            path:"/info/image"
                        }
                    ]
                },
                {
                    name:"学习管理",
                    icon:"iconfont icon-w_xuexi",
                    path:"/study",
                    children:[
                        {
                            name:"QilinUtilsJS工具库",
                            path:"/study/QilinUtils"
                        },
                        {
                            name:"QilinWeb框架",
                            path:"/study/QilinWeb"
                        },
                        {
                            name:"Vue知识库",
                            path:"/study/knowledge"
                        },
                        {
                            name:"项目技能库",
                            path:"/study/skill"
                        },
                        {
                            name:"elementUI示例库",
                            path:"/study/element"  
                        },
                        {
                            name:"css/js动画库",
                            path:"/study/animation"  
                        },
                        {
                            name:"echarts图表库",
                            path:"/study/echarts"  
                        }
                    ]
                },
                {
                    name:"版本日志",
                    icon:"el-icon-tickets",
                    path:"/logs"
                },
                {
                    name:"留言板",
                    icon:"el-icon-edit-outline",
                    path:"/messageBorad"
                },
                // {
                //     name:"圈子管理",
                //     icon:"iconfont icon-nvren",
                //     path:"/harem",
                //     children:[
                //         {
                //             name:"莺惭燕妨",
                //             path:"/harem/beauty"
                //         }
                //     ]
                // }
            ]
        }
    },
    computed:{
        //默认路由取当前地址栏对应路由
        defaultRouteName(){
            return this.$route.path;
        },
        userInfo(){
            return this.$store.getters.userInfo;
        },
        // 获取是否展开还是收缩
        getCollapse(){
            return this.$store.getters["home/getIsCollapse"];
        },
        // 获取左侧导航栏的宽度
        getWidth(){
            return `width:${this.$store.getters["home/getWidth"]}rem;`;
        }
    },
    methods:{
        // 若是管理员，则显示该模块
        hideMenu(){
            if(this.userInfo.identify === "manager"){
                const index=this.menuList.findIndex((item)=>{
                    return item.name === "圈子管理";
                });
                if(index === -1){
                    this.menuList.push(
                        {
                            name:"圈子管理",
                            icon:"iconfont icon-nvren",
                            path:"/harem",
                            children:[
                                {
                                    name:"莺惭燕妨",
                                    path:"/harem/beauty"
                                }
                            ]
                        }
                    );
                };
            }else{
                const index=this.menuList.findIndex((item)=>{
                    return item.name === "圈子管理";
                });
                if(index !== -1){
                    this.menuList.splice(index,1);
                };
            };
        }
    },
    beforeMount(){
        // this.$root.$on("update:collapse",(flag)=>{
        //     console.log("----",flag);
        //     this.isCollapse=flag;
        // });
    },
    activated(){
        this.hideMenu();
    }
}
</script>
<style lang="less" scoped>
.qilin-leftMenu{ 
    // width:14.286rem;
    transition:width 1s linear 0s;
    background-color:@color-theme-common-dark;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    z-index:2;
    >.el-row{
        height:100%;
        >.el-col{
            height:100%;
            >.el-menu.el-menu-vertical-demo{
                height:100%;
                border-right:none;
                background-color:@color-theme-common-dark;
                overflow-y:auto;
                padding-bottom:8rem;
                -ms-overflow-style:none; //ie下隐藏滚动条
                scrollbar-width:none; //火狐下隐藏滚动条
                &::-webkit-scrollbar{ //谷歌下隐藏滚动条
                    display:none;
                }
                .el-menu-item.is-active{
                    color: @color-text-title-checked;
                    >i{
                        color:@color-text-title-checked;
                    }
                    &:focus{
                        background-color:rgba(255,255,255,0.6);
                    }
                }
                ::v-deep .el-submenu .el-menu{
                    background:@color-theme-common-light;
                }
                ::v-deep .el-submenu__title,.el-menu-item{
                    color:@color-text-title;
                    >i{
                        color:@color-text-title;  
                    }
                }
                .el-menu-item:hover,::v-deep .el-submenu__title:hover{
                    background-color:rgba(255,255,255,0.5);
                }
                .el-menu-item i{
                    color:inherit;
                }
            }
            a{
                text-decoration:none;
            }
        }
    }
}
</style>